<script setup lang="ts">
import {ref, useTemplateRef} from "vue";
//声明事件方式1--数组形式
// const emit = defineEmits(["showMessage"]);

//声明事件方式2--对象形式
// const emit = defineEmits({
//   showMessage: (msg: string) => {
//     console.log(msg);
//     // 返回 `true` 或 `false`
//     // 表明验证通过或失败
//     return true;
//   }
// });

//声明事件方式2--TS泛形形式
// const emit = defineEmits<{
//   (e: 'showMessage', msg: string): void,
// }>();

//声明事件方式3--可选的、更简洁的语法
const emit = defineEmits();

const msg = ref('')
const msg2 = ref('')
const input = useTemplateRef('msg-box') //获得dom对象

//我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，
// 但 defineEmits() 会返回一个相同作用的函数供我们使用
function callback() {
  if (msg2.value === '') {
    // $emit('showMessage', '请输入');//error
    emit('showMessage', "请输入提示信息");//ok
    input.value?.focus();
    return;
  }
  // $emit('showMessage', msg.value);//error
  emit('showMessage', msg2?.value);//ok
  msg2.value = '';
}
</script>

<template>
  <div class="border rounded-3 p-3">
    <p>子组件通过$emit('showMessage',msg)触发父组件事件</p>

    <input type="text" v-model="msg">
    <button @click="$emit('showMessage',msg)">点击</button>
  </div>

  <div class="border rounded-3 p-3">
    <p>子组件通过子函数触发父组件的事件，以实现更复杂的逻辑</p>
    <input type="text" @keyup.enter="callback" v-model="msg2" ref="msg-box" placeholder="请输入"/>
    <button @click="callback">点击</button>
  </div>

</template>

<style scoped>

</style>